<template>
  <div class="flex-1 overflow-y-auto p-6 space-y-6" ref="chatContainer">
    <template v-if="messages.length === 0">
      <!-- 空聊天提示 -->
      <div class="flex flex-col items-center justify-center h-full text-gray-400">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
        </svg>
        <p class="text-lg">没有消息记录</p>
        <p class="text-sm mt-2">发送一条消息开始聊天吧</p>
      </div>
    </template>

    <template v-else>
      <!-- 消息列表 -->
      <div v-for="(message, index) in messages" :key="message.id" class="message-container">
        <!-- AI消息 -->
        <div v-if="message.sender === 'ai'" class="flex items-start">
          <div class="w-8 h-8 bg-[#8153ff] rounded-full flex-shrink-0 flex items-center justify-center mr-3">
            <span class="text-white text-sm">AI</span>
          </div>
          <div class="bg-gray-800 p-4 rounded-lg max-w-3xl">
            <MessageBubble :content="message.content" />
          </div>
        </div>

        <!-- 用户消息 -->
        <div v-else class="flex items-start justify-end">
          <div class="bg-gradient-to-r from-[#8153ff] to-[#93dc24] p-4 rounded-lg max-w-3xl">
            <MessageBubble :content="message.content" />
          </div>
          <div class="w-8 h-8 bg-gray-700 rounded-full flex-shrink-0 flex items-center justify-center ml-3">
            <span class="text-white text-sm">我</span>
          </div>
        </div>

        <!-- 首条消息后的推荐内容 -->
        <template v-if="index === 0 && message.sender === 'ai'">
          <!-- 推荐助手区 -->
          <div class="pl-11 mt-6">
            <div class="mb-2 text-sm text-gray-400">新推荐的助手:</div>
            <div class="grid grid-cols-2 gap-4">
              <div class="bg-gray-800 p-4 rounded-lg cursor-pointer hover:bg-gray-700 transition-colors">
                <div class="flex items-center mb-2">
                  <div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center mr-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                    </svg>
                  </div>
                  <div class="font-medium">学术论文专家</div>
                </div>
                <p class="text-sm text-gray-400">提供高质量文献检索与分析的学术研究助手</p>
              </div>
              <div class="bg-gray-800 p-4 rounded-lg cursor-pointer hover:bg-gray-700 transition-colors">
                <div class="flex items-center mb-2">
                  <div class="w-6 h-6 bg-[#93dc24] rounded-full flex items-center justify-center mr-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                    </svg>
                  </div>
                  <div class="font-medium">Cron 老式助手</div>
                </div>
                <p class="text-sm text-gray-400">Crontab老式生成器</p>
              </div>
            </div>
          </div>

          <!-- 常见问题 -->
          <div class="pl-11 mt-6">
            <div class="mb-2 text-sm text-gray-400">大家都在问:</div>
            <div class="flex flex-wrap gap-2">
              <div class="bg-gray-800 px-3 py-2 rounded-full text-sm cursor-pointer hover:bg-gray-700 transition-colors">
                AIChat 是什么?
              </div>
              <div class="bg-gray-800 px-3 py-2 rounded-full text-sm cursor-pointer hover:bg-gray-700 transition-colors">
                是否有端到端加密?
              </div>
              <div class="bg-gray-800 px-3 py-2 rounded-full text-sm cursor-pointer hover:bg-gray-700 transition-colors">
                是否支持本地部署?
              </div>
              <div class="bg-gray-800 px-3 py-2 rounded-full text-sm cursor-pointer hover:bg-gray-700 transition-colors">
                是否支持多种 AI 服务提供商?
              </div>
            </div>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<script setup>
import { defineProps, ref, watch, nextTick } from 'vue';
import MessageBubble from './MessageBubble.vue';

const props = defineProps({
  messages: {
    type: Array,
    default: () => []
  }
});

const chatContainer = ref(null);

// 监听消息变化，自动滚动到底部
watch(() => props.messages.length, async () => {
  await nextTick();
  if (chatContainer.value) {
    chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
  }
});
</script>

<style scoped>
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1f2937;
}

::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

.message-container {
  animation: fade-in 0.3s ease-in-out;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style> 